<!--购买VTN-->
<template>
  <div class="bg" @rightBtn="rightBtn">

    <scroller class="all bg1" v-if="coin.maxNum>0">
      <div class="wrapper" v-if="coin">
        
        <!--选择币-->
        <div class="row acenter" @click="selectClick">
          <text class="font48 text2">{{coin.name}}</text>
          <LImage class="img-arrow" :src="Config.img('xiala_blue.png')"></LImage>
        </div>
        <div class="height10"></div>
        <text class="font26 text3">{{T('当前汇率')+'1 VTN'+' ≈ '+coin.vtnRate+' '+coin.coinName}}</text>
        
        <!--充值类型-->
        <div class="height60"></div>
        <div class="row acenter jbetween">
          <text class="font30 text2">{{type == 1 ? T('充值金额') : T('充值数量')}}</text>
          <text class="font26 main-t1" @click="typeClick">{{type == 1 ? T('按数量') : T('按金额')}}</text>
        </div>

        <!--按金额充值-->
        <template v-if="type == 1">
          <div class="row acenter">
            <input class="input font30 text2" v-model="num" :placeholder="T('请输入金额')" type="number" maxlength="12" @input="onInput">
            <text class="font28 text3">{{coin.coinName}}</text>
          </div>

          <div class="line line1"></div>
          <div class="height30"></div>
          <div class="row acenter jbetween">
            <text class="font30 text2">{{T('您将收到')}}</text>
            <text class="font30 text2">{{totalNum+' VTN'}}</text>
          </div>
          <text class="font22 text3 tRight">{{'('+T('汇率将会锁定24H')+')'}}</text>
        </template>

        <!--按数量充值-->
        <template v-else>
          
          <div class="row acenter">
            <input class="input font30 text2" v-model="num" :placeholder="T('请输入数量')" type="number" maxlength="12" @input="onInput">
            <text class="font28 text3">{{'VTN'}}</text>
          </div>

          <div class="line line1"></div>
          <div class="height30"></div>
          <div class="row jaround">
            <div class="btn main-b1" v-for="(item, index) in ['200', '300', '500', '1000']" v-bind:key="index" @click="numClick(item)">
              <text class="font30 main-t1">{{item}}</text>
            </div>
          </div>

          <div class="height30"></div>
          <div class="row acenter jbetween">
            <text class="font30 text2">{{T('您需支付')}}</text>
            <text class="font30 text2">{{totalNum+" "+coin.coinName}}</text>
          </div>
          <text class="font22 text3 tRight">{{'('+T('汇率将会锁定24H')+')'}}</text>
        </template>

        <text class="font26 warning-t1 tipe mb40">{{
          T('单账户最多累计充值&{1}，您当前已累计充值&{2}，最多还可充值&{3}')
          .replace("&{1}", coin.maxValue+coin.coinName)
          .replace("&{2}", coin.rechargeNumber+coin.coinName)
          .replace("&{3}", coin.maxNum+coin.coinName)
        }}</text>

        <!--提示-->
        <text class="font24 text3 line-height50">{{T('1、当完成12个区块确认后，则视为已到账。')}}</text>
        <text class="font24 text3 line-height50">{{T('2、到账时间容易受网络堵塞的影响造成延迟，请您耐心等待。')}}</text>
        <text class="font24 text3 line-height50">{{T('3、充值的VTN仅可用于消费平台各类产品及服务，但不能兑换成其他币种。')}}</text>
        <text class="font24 text3 line-height50">{{T('4、VTN是Vtrading生态通证，暂无其他外部交易渠道。')}}</text>
        <!-- <text class="font24 text3 line-height50">{{T('5、每个账号每日最高可购买等值200USDT的VTN。')}}</text> -->

        <div class="but-ok main-bt1" @click="okClick">
          <text class="font30 text1">{{T('立即充值')}}</text>
        </div>
      </div>
    </scroller>
    <div class="kong" v-else>
      <LImage class="img-kong mb40" :src="Config.img('shangxian.png')"></LImage>
      <text class="font30 text2 tCenter">{{'您充值已达到上限'}}</text>
    </div>

    <!--充值地址二维码-->
    <div class="qrcode" v-if="showCode">

      <div class="qrcode-content" >

        <text class="font24 text2">{{T('收款地址可能会变更，请先在此页面确认地址再充值。请勿转入非${1}资产，否则资产将不可找回。').replace("${1}", coin.name)}}</text>
        

        <div class="qrcode-size">
            <WeexQRCode class="qrcode-code" :code="coin.address"></WeexQRCode>
        </div>


        <text class="font26 main-t1 mb20" v-if="type==1">{{'充值金额'+num+coin.coinName}}</text>
        <text class="font26 main-t1 mb20" v-else>{{'充值金额'+totalNum+coin.coinName}}</text>

        <text class="font26 text2">{{T('收款地址')}}</text>
        <div class="height10"></div>
        <text class="font24 text2">{{coin.address}}</text>

        <div class="qrcode-buts">
          <div class="qrcode-but" @click="showCode = false">
            <text class="font34 fontz text3">取消</text>
          </div>
          <div class="qrcode-line"></div>
          <div class="qrcode-but" @click="copyClick(coin.address)">
            <text class="font34 fontz main-t1">复制地址</text>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jconfig from "@/_js/config";
import jhttps from "@/_js/https"; ;
import jdebug from "@/_js/debug"; ;

const clipboard = weex.requireModule("clipboard");
const weexFunction = weex.requireModule("WeexFunction");
const globalEvent = weex.requireModule('globalEvent');

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('购买VTN'));
weexFunction.setRightBtn(T('购买记录'));


export default {
  
  data() {
    return {
      T:T,
      Config:jconfig,
      wallet:undefined, //consumeWallet(消费钱包) incomeWallet(收益钱包) depositWallet(保证金钱包)

      coinNames:undefined, //支持币数组
      coinMap:undefined, //支持币模型
      coin:undefined, //当前选中币
      type:1, //1按金额， 2按数量

      num:'', //输入数量
      totalNum:'0', //支付总数、得到总数
      showCode:false,
    };
  },

  created(){

    var param = weex.config;
    this.wallet = param.wallet;
    this.httpHome();
  },

  methods: {

    /*************************************************通信触发*/
    //右按钮触发
    rightBtn() {
      var nav = {'navColor':'#0c0c0c'};
      var param = {'wallet':this.wallet};
      jnavigator.open('', "wallet/WalletBuyRecord", param, nav);
    },

    /******************************* HTTP*/
    //http充值首页
    httpHome(){

      jmodal.showLoad();
      var param = {'wallet':this.wallet}
      jhttps.post("tradeV2/getRechargePage",param,true,(data)=>{

        jmodal.hideLoad();
        if(data.status == 200){
          data = data.data;

          var coins = []; //支持币
          var coinNames = [];
          var coinMap = {};
          for (let index = 0; index < data.coinList.length; index++) {

            var coin = data.coinList[index];
             if ((this.wallet == 'consumeWallet' && coin.coinName=='USDT')) {
              
              coin.name = coin.coinName + coin.chainName;
              coin.vtnRate = jmath.chu(1, coin.rate, 8, 2);
              var maxNum = jmath.jian(coin.maxValue, coin.rechargeNumber);
              maxNum = maxNum < 0 ? 0 : maxNum;
              coin.maxNum = jmath.gfCoin(maxNum, coin.coinName);

              coinNames.push(coin.name);
              coinMap[coin.name] = coin;
              coins.push(coin);
            }
          }
          this.coinNames = coinNames;
          this.coinMap = coinMap;
          this.coin = coins[0];
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    /*******************************输入框回调*/ 
    //输入内容改变
    onInput(e){
      var rate = this.type == 1 ? this.coin.rate : this.coin.vtnRate;
      var type = this.type == 1 ? 1 : 2;
      this.totalNum = jmath.cheng(this.num, rate, 6, type);
    },

    /******************************* 点击*/
    //选择币
    selectClick(){
      jmodal.actionSheet(this.coinNames, this.coin.name,(value)=>{
        this.coin = this.coinMap[value];
      });
    },

    //类型切换
    typeClick() {
      this.type = this.type == 1 ? 2 : 1;
      this.num = '';
      this.totalNum = '0';
    },

    //数量点击
    numClick(num) {
      this.num = num;
      this.onInput();
    },

    //复制点击
    copyClick(address) {
      jmodal.toast(T('复制成功'),2);
      clipboard.setString(address);
      this.showCode = false;
    },

    //我已充值
    okClick() {


      if (!this.num.length) {
          this.type==1 
          ? jmodal.toast('请输入充值金额') 
          : jmodal.toast('请输入充值数量');
          return;
      }

      if (this.num == 0) {
          this.type==1 
          ? jmodal.toast('充值金额不可为0') 
          : jmodal.toast('充值数量不可为0');
          return;
      }

      if(this.type==1 && Number(this.num)>Number(this.coin.maxNum))  {
        jmodal.toast('您当前最多还可以充值'+this.coin.maxNum+this.coin.coinName);
        return;
      }
      if(this.type==2 && Number(this.totalNum)>Number(this.coin.maxNum))  {
        jmodal.toast('您当前最多还可以充值'+this.coin.maxNum+this.coin.coinName);
        return;
      }

      this.showCode = true;
      // jmodal.alert('      '+T('区块链上转账需要一定的时间来被确认，确认数达到要求后即可成功入账，请您耐心等待。'));
    },
  }
}
</script>


<style src="@/_css/style.css" ></style>
<style scoped>
.bg {
  flex: 1;
  flex-direction: column;
}
.wrapper {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 60px;
}
.img-arrow{
  width:22px;
  height:14px;
  margin-left: 10px;
}
.img-change {
  width: 26px;
  height: 19px;
  margin-right: 10px;
}
.line-height50 {
  line-height: 50px;
}

/******************** 输入框 */
.input{
  flex: 1;
  height:80px;
  placeholder-color:#909AB4;
  margin-right: 20px;
}
.line {
  height: 1;
}
.btn{
  justify-content: center;
  align-items: center;
  width:160px;
  height:60px;
  border-width:1px;
  border-radius:12px;
}
.tipe {
  margin-top: 10px;
}
/******************** 二维码 */
.qrcode{ 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  align-items: center;
  justify-content: center;
  align-items: center;

  background-color: rgba(0, 0, 0, 0.3);
}
.qrcode-content{ 
  flex-direction: column;
  align-items: center;

  width: 600px;
  background-color: #2F364B;
  border-radius: 24px;
  padding: 30px;
}
.qrcode-size {
  justify-content: center;
  align-items: center;
  width:256px;
  height:256px;
  background-color:#FFFFFF;
  border-radius: 6px;

  margin-top:30px;
  margin-bottom:30px;
}
.qrcode-code{
  width:230px;
  height:230px;
}
.qrcode-buts {
  flex-direction: row;
  width: 600px;
  height: 88px;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: -30px;
  margin-top: 40px;

  border-top-color: #151A2A;
  border-top-width: 1px;
}
.qrcode-but {
  flex: 1;
  align-items: center;
  justify-content: center;
}
.qrcode-line {
  width: 1px;
  height: 88px;
  background-color: #151A2A;
}
.copy {
  justify-content: center;
  align-items: center;

  min-width: 152px;
  height: 52px;
  border-radius: 6px;
  border-width: 2px;

  padding-left: 20px;
  padding-right: 20px;

  margin-top: 40px;
  margin-bottom: 40px;
}

/******************** 已充值 */
.but-ok {
  justify-content: center;
  align-items: center;

  height: 80px;
  border-radius: 12px;

  margin-top:80px;
}

/******************** 空 */
.kong {
  flex: 1;
  align-items: center;
  justify-content: center;
}
.img-kong {
  width: 264px;
  height: 204px;
}

</style>